
/* 根元素样式 设置页面背景、字体大小、字体颜色，字符间距、长单词换行 */
page {
  background-color: #f3f3f3;
  font-size: 28rpx;
  box-sizing: border-box;
  color: #333;
  letter-spacing: 0;
  word-wrap: break-word;
}

/* 设置常用元素尺寸规则 */
view,textarea,input,label,form,button,image{box-sizing: border-box;}
/* 按钮样式处理 */
button{font-size: 28rpx;}
/* 取消按钮默认的边框线效果 */
button:after{border:none;}
/* 设置图片默认样式，取消默认尺寸 */
image{display: block;height: auto;width: auto;}
/* 输入框默认字体大小 */
textarea,input{font-size: 28rpx;};

/* 列式弹性盒子 */
.flex-col {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}
/* 行式弹性盒子 */
.flex-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
 
/* 弹性盒子弹性容器 */
.flex-col>view.flex-grow{width:0;flex-grow: 1;}
.flex-row>view.flex-grow{height:0;flex-grow: 1;}
 
/* 弹性盒子允许换行 */
.flex-col.flex-wrap{flex-wrap: wrap;}
 
/* 弹性盒子居中对齐 */
.flex-col.flex-center,.flex-row.flex-center{justify-content: center;}
 
/* 列式弹性盒子两端对齐 */
.flex-col.flex-space{justify-content: space-between;}

/* 弹性盒子快速分栏 ,这里非常郁闷 uniapp 居然不支持 * 选择器 */
.flex-col.flex-col-2>view{width: 50%;}
.flex-col.flex-col-3>view{width: 33.33333%;}
.flex-col.flex-col-4>view{width: 25%;}
.flex-col.flex-col-5>view{width: 20%;}
.flex-col.flex-col-6>view{width: 16.66666%;}

/* 字体颜色 */
.color-333 {color: #333;}
.color-666 {color: #666;}
.color-999 {color: #999;}
.color-ccc {color: #ccc;}
.color-fff {color: #fff;}
.color-6dc{color: #6dca6d;}
.color-d51{color: #d51917;}
.color-09f{color: #0099ff;}
 
/* 背景色*/
.bg-fff{background-color: #ffffff;}
 
/* 字体大小 */
.size-10 {font-size: 20rpx;}
.size-12 {font-size: 24rpx;}
.size-14 {font-size: 28rpx;}
.size-16 {font-size: 32rpx;}
.size-18 {font-size: 36rpx;}
.size-20 {font-size: 40rpx;}
 
/* 字体加粗 */
.font-b{font-weight: bold;}
 
/* 对齐方式 */
.align-c{text-align: center;}
.align-l{text-align: left;}
.align-r{text-align: right;}
 
/* 遮罩 */
.shade{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.8);
  z-index: 100;
}
 
/* 弹窗 */
.shade-box{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 101;
  min-width: 200rpx;
  min-height: 200rpx;
}

.container {
	height: calc(100vh - var(--window-top));
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: space-between;
	align-items: stretch;
}

.copyImgModal {
	image {
		width: 80vw;
		height: 400px;
	}
	.fileCopy {
		width: 264px;
		height: 272px;
		padding-top: 40px;
		view {
			display: flex;
			justify-content: center;
		}
		.file-name {
			margin-top: 4px;
			font-size: 16px;
			font-weight: 500;
		}
		.remark {
			text-align: center;
			padding: 0 14px;
			margin-top: 10px;
			font-size: 15px;
			text-wrap: 1px;
			letter-spacing: 1px;
		}
	}
	.footer {
		border-top: 1px solid #ddd;
		width: 100%;
		display: flex;
		view {
			flex: 1;
		}
	}
}

.reply-msg {
	padding: 12rpx 0 4px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	.reply-name {
		margin-bottom: 2px;
		font-size: 14px;
	}
}

page {
	font-size: 28rpx;
	height: 100%;
}

.talk-list {
	padding-bottom: 20rpx;
	.timestamp {
		margin: 0 auto;
		text-align: center;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		margin-bottom: 12rpx;
		color: #A4A6A8;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		display: inline-block;
		width: auto;
		min-width: auto;
		max-width: none;
		line-height: 1.4;
		position: relative;
		top: 10rpx;
	}

	.revoke {
		text-align: center;
		color: #999;
		margin: 2px 10px 0 10px;
		padding: 10rpx 0;
		text {
			display: inline-block;
			background-color: rgba(255, 255, 255, .9);
			border-radius: 4px;
			padding: 4px 8px;
			font-size: 12px;
			.reEdit {
				color: #3D85FC;
			}
		}
	}

	/* 消息项，基础类 */
	.item {
		padding: 20rpx 20rpx 0 20rpx;
		align-items: self-start;
		align-content: flex-start;
		color: #333;

		::v-deep .u-image__error {
			position: static !important;
		}

		.pic {
			width: 72rpx;
			height: 72rpx;
			border-radius: 10rpx;
			border: #fff solid 1px;
		}

		.pic-text {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 72rpx;
			height: 72rpx;
			border-radius: 10rpx;
			color: #fff;
			font-size: 24rpx;
			background-color: #3D85FC;
		}

    .msg-item {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .msg-item.left {
      align-items: flex-start; 
    }

    .msg-item.right {
      align-items: flex-end;
    }

		.chat-name {
			color: #666;
			font-size: 26rpx;
		}
		.readStatus {
			text-align: right;
			margin: 5rpx 13rpx 0 0;
			color: #999;
			font-size: 22rpx;
		}

		.msg-container {
			display: flex;
		}

		.inner {
			display: inline-block;
      max-width:65vw;
      border-radius: 16rpx;
		}

		.content {
			margin-top: 4rpx;
			line-height: 38rpx;
			position: relative;
			box-sizing: border-box;
			padding: 14rpx 18rpx;
			word-break: break-word;
			white-space: pre-wrap;
		}

		.send-loading {
			position: absolute;
			left: -20px;
			top: 50%;
		}

		.progress {
			margin-top: 8px;
			padding: 4px 0 4px 2px;
			display: flex;
			align-items: center;
			.upCancel {
				margin-left: 12px;
			}
		}

		.file-message {
			display: flex;
			line-height: 32rpx;
			width: 55vw;

			.file-name {
				margin-left: 20rpx;
				font-weight: 500;
				font-size: 28rpx;

				text {
					font-size: 24rpx;
					color: #A4A6A8;
					font-weight: 400;
				}
			}
		}
		rich-text .reply-html p {
			font-size: 12px !important;
			line-height: 1.4;
			color: #409eff !important;
		}
		rich-text p {
			font-size: 16px;
			line-height: 1.6;
			.unfocusable {
				color: #409eff !important;
			}
		}


		/* 收到的消息 */
		&.pull {
			.inner {
				justify-content: left;
				background-color: #e3e4e5;
				margin-left: 12rpx;
			}
			.inner:active {
				background-color: rgb(0, 0, 0, .15);
			}
		}

		/* 发出的消息 */
		&.push {
			flex-direction: row-reverse;
			.msg-container {
				justify-content: right;
			}
			.inner {
				background-color: #C9E7FF;
				margin-right: 12rpx;
			}
			.inner:active {
				background-color: rgb(0, 0, 0, .1);
			}
			.related-member {
				background-color: rgba(0, 0, 0, .1);
			}
		}
	}
}